<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="/layui/css/formSelects-v4.css">
<script src="/js/jquery.min.js"></script>
<script src="/layui/formSelects-v4.js"></script>
<link rel="stylesheet" href="/layui/css/layui.css">
<link rel="stylesheet" href="/css/metroStyle/metroStyle.css">
<script src="/layui/layui.js"></script>
<script src="/js/jquery.ztree.all.js"></script>
<!--<script>
    $(function () {
        var s =$(".layui-table tbody tr").html();
        alert(s)
    })
</script>-->

<body>
<h2 style="margin-top: 20px;">权限列表</h2>
<hr>
<table class="layui-table" id="permissionTable" lay-filter="permissionTable">

</table>
<script>
    var table;
    var treeGrid;
    var form;

   layui.config({
        base: '/layui/lay/modules/',
    }).extend({
        formSelects: 'formSelects-v4'
    });
    layui.use(['table','tree','form','treeGrid','formSelects'],function () {
        treeGrid = layui.treeGrid;
        var select = layui.formSelects;

        form = layui.form;
        table = layui.table
        $.get('http://localhost:9999/Permission/TreeSimple',function (data) {

            $.each(data,function () {
                    this.isOpen =false;
            })

                treeGrid.render({
                    elem : "#permissionTable",
                    toolbar:'#toolbarDemo',
                    data : data
                    ,even : true,
                    treeId : 'perId',
                    treeUpId : 'parentId',
                    treeShowName : 'perId',
                    cols: [[
                        {type: 'checkbox'}
                        , {field: 'perId', title: '编号'}
                        , {field: 'perName', title: '权限名称'}
                        , {field: 'perImage',  title: '图标'}
                        , {field: 'perType',  title: '权限类型'}
                        ,{toolbar: '#barDemo'}
                    ]]
                });

        });





/*        //头工具栏事件
        treeGrid.on('toolbar(permissionTable)',function(obj){
            //获取选中行
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'batchDelete': //批量删除
                    alert("adsf");
                 /!*   var data = checkStatus.data;
                    if(data.length == 0){
                        layer.msg('请选择要删除的数据行');
                        return;
                    }
                    layer.confirm("确定要删除选中的数据吗？",function (index) {
                        var p = "?";
                        for(let user of data){
                            p += `userid=${user.userid}&`;
                        }
                        $.post(`http://localhost:9999/User/batchdelete${p}`,d => {
                            layer.close(index);
                            table.reload("userList");
                        });
                    })*!/
                    break;
                case 'add':

                    $.post('add.html',function (da) {
                        layer.open({
                            type:1,
                            title:'添加用户',
                            skin:'layui-layer-molv',
                            area:'800px',
                            anim:4,
                            content:da,
                            maxmin:true,
                            btn:['确定','取消'],
                            /!*yes:function () {
                                var formdata = $("#add_user_form").serialize();
                                console.log(formdata);
                                $.post('http://localhost:9999/User/add',form+data,function (data) {
                                    layer.close(layer.index);
                                    table.reload("userList");
                                })
                            }*!/
                        })
                    })
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
            };
        });*/
        treeGrid.on('tool(permissionTable)',function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'del'){ //删除
                $.get('http://localhost:9999/Permission/Perpdjb',{perId:data.perId},function (pdjbdata1) {
                    if (pdjbdata1.data.perType == 'menu' && pdjbdata1.data.parentId == null) {
                        $.get('http://localhost:9999/Permission/Perdelyiji',{perId:data.perId},function () {


                        })
                    }
                    if (pdjbdata1.data.perType == 'menu' && pdjbdata1.data.parentId != null) {
                        $.get('http://localhost:9999/Permission/Perdelerji',{perId:data.perId},function () {


                        })
                    }
                    if (pdjbdata1.data.perType == 'permission' && pdjbdata1.data.parentId != '') {
                        $.get('http://localhost:9999/Permission/Perdelsanji',{perId:data.perId},function () {


                        })
                    }
                    location.reload(true);

                })

            }else if (layEvent === 'edit'){// 编辑
                $.post('perupd.html',function (datas) {
                    layer.open({
                        type:5,
                        title:'修改权限',
                        skin:'layui-layer-molv',
                        area:'800px',
                        anim:3,
                        content:datas,
                        maxmin:true,
                        btn:['确定','取消'],
                        success:function(){
                            $.get('http://localhost:9999/Permission/Perpdjb',{perId:data.perId},function (pdjbdata) {
                                $.get("http://localhost:9999/Permission/Peryiji",function(data){
                                    $.each(data.data,function(){
                                        var opt = $("<option></option>").appendTo("#two");
                                        opt.text(this.perName).val(this.perId);
                                    });
                                    form.render();
                                });
                           if (pdjbdata.data.perType == 'menu' && pdjbdata.data.parentId == null) {
                                    $.get('http://localhost:9999/Permission/Peroneji',{perId:data.perId},function (onejidata) {
                                        var a = onejidata.data;
                                        a['jibei'] = 1;
                                        form.val('per2Form',a);
                                        perTwoji = -1;
                                        perThreeji = -1;

                                    })
                                }

                                if (pdjbdata.data.perType == 'menu' && pdjbdata.data.parentId != null) {
                                    var k = {jibei:2}
                                    form.val('per2Form',k);
                                    setTimeout(function () {
                                        $.get('http://localhost:9999/Permission/Pertwoji',{perId:data.perId},function (twojidata) {
                                            var a  = twojidata.data;
                                            form.val('per2Form',a);

                                        })
                                    },300)
                                }
                                if (pdjbdata.data.perType == 'permission' && pdjbdata.data.parentId != '') {
                                    var q = {jibei:3}
                                    form.val('per2Form',q);

                                    setTimeout(function () {
                                        $.get('http://localhost:9999/Permission/PergetbyoneId',{perId:data.perId},function (erjiadata) {
                                            var w = {'parentid':erjiadata.data}
                                            form.val('per2Form',w);
                                            $.get("http://localhost:9999/Permission/Pererji",{perId:$("#two").val()},function(data){
                                                       $.each(data.data,function(){
                                                           var opter = $("<option></option>").appendTo("#three");
                                                           opter.text(this.perName).val(this.perId);
                                                       });
                                                       form.render();
                                                   })
                                           setTimeout(function () {
                                               $.get('http://localhost:9999/Permission/Perthreeji',{perId:data.perId},function (threejidata) {
                                                   var t = threejidata.data;
                                                   form.val('per2Form',t);
                                                   perTwoji = $("#two").val();
                                                   perThreeji = $("#three").val();
                                                   pericon = $("#perImage").val();
                                                 /*  alert(perTwoji);
                                                   alert(perThreeji);*/
                                               })
                                           },230)
                                        })
                                    },200)
                                }
                            })
                        },
                        yes:function () {
                          var formdata = $("#add_per2_form").serialize();
                          /*  console.log(formdata);*/
                           $.post('http://localhost:9999/Permission/Perupdate',formdata,function (data) {
                                layer.close(layer.index);
                                location.reload(true)
                            })
                        }
                    })
                })
            } else if (layEvent === 'detail'){ //TODO 查看详情

            }else if (layEvent === 'peradd'){ //TODO 查看详情

            }

        });

    });
    function peradd() {
        $.post('peradd.html',function (da) {
            layer.open({
                type:1,
                title:'添加权限',
                skin:'layui-layer-molv',
                area:'800px',
                anim:4,
                content:da,
                maxmin:true,
                btn:['确定','取消'],
                yes:function () {
              var formdata = $("#add_per2_form").serialize();
            $.post('http://localhost:9999/Permission/Peradd',formdata,function (data) {
                layer.close(layer.index);
                location.reload(true)
            })
        }
        })
    })}
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    <a href=""></a>

    <!-- 这里同样支持 laytpl 语法，如： -->
    {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
    {{#  } }}
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" onclick="peradd();" lay-event="add">添加</button>

        <button class="layui-btn layui-btn-sm" lay-event="batchDelete">批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="import">批量导入</button>
    </div>
</script>
</body>
</html>